<template>
  <div style="padding: 32px 0; background-color: #fff;">
    <a-steps direction="horizontal" style="margin: 0 auto; width: 100%;flex-wrap: wrap;" :current="1" size="small">
      <a-popover slot="progressDot" slot-scope="{ index, prefixCls }">
        <template slot="content">
          <p style="margin-bottom: 5px;" v-if="getContent(index, 'recordType')===0">
            发起人 ：{{ getContent(index, 'approverName') }}
          </p>
          <p style="margin-bottom: 5px;" v-else>
            审批人 ：{{ getContent(index, 'approverName') }}
          </p>
          <p style="margin-bottom: 5px;">单位 ：{{ getContent(index, 'departName') }}</p>
          <p style="margin-bottom: 5px;" v-if="getContent(index, 'recordType')===0">
            时间：{{ getContent(index, 'createTime') }}
          </p>
          <p style="margin-bottom: 5px;" v-else>
            时间：{{ getContent(index, 'approverTime') }}
          </p>
          <p style="margin-bottom: 5px;" v-if="getContent(index, 'recordType')!==0">意见：{{ getContent(index, 'remark') }}</p>
        </template>
        <span :class="`${prefixCls}-icon-dot`" />
      </a-popover>
      <a-step v-for="(item, index) in list" :key="index" :title="item.nodeName" :status="setStatus(item.status)" style="margin-bottom: 28px;">
        <!-- <a-icon
          v-if="item.recordType === 2"
          type="exclamation-circle"
          slot="icon"
          :style="{ color: '#FE6601', fontSize: '24px' }"
        /> -->
        <div class="font-gray" slot="description">
          <p style="margin: 0 0 5px 0;" :class="[item.status==2?'green':item.status==3?'red':'' ]">
            {{ item.status==1? '审批人: '+item.approverName: item.statusName }}
          </p>
          <a v-if="isHandleUrge && isInitiator && item.status===1" :disabled="urgeDisabled" @click.stop="handleUrge(item)">催一下</a>
        </div>
      </a-step>
    </a-steps>
    <div class="isExamine" v-if="isExamine && approvalId" style="margin-top: 10px;">
       <a-row type="flex">
      <a-form-model ref="form" :rules="validatorRules" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-col :span="24" :order="0">
          <a-form-model-item label="审批意见">
            <a-textarea :auto-size="{ minRows: 3, maxRows: 6 }" v-model="form.remark" :disabled="!isApprover" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12" :order="0">
          <a-form-model-item label="审批人" :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }">
            <a-input v-model="form.userName" disabled />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="所属单位" :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }">
            <j-select-depart v-model="form.orgCode" :trigger-change="true" customReturnField="orgCode" :multi="true" disabled />
          </a-form-model-item>
        </a-col>
        <a-col :span="24" :order="0">
          <a-form-model-item label="审批结果" prop="status" >
            <a-radio-group v-model="form.status" name="radioGroup" :disabled="!isApprover">
              <a-radio :value="2"> 通过 </a-radio>
              <a-radio :value="3"> 驳回 </a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <!--//status为1(待审批)时，才能提交审批-->
        <a-col :span="24" :order="0" v-if="isApprover">
          <a-form-model-item :wrapper-col="{ offset: 20 }" style="margin-bottom: 0">
            <a-button type="primary" @click="onSubmit"> 确定 </a-button>
            <a-button style="margin-left: 10px" @click="onCancel"> 取消 </a-button>
          </a-form-model-item>
          </a-col>
        </a-form-model>
      </a-row>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { USER_INFO } from "@/store/mutation-types"
import * as flowServerApi from '@/api/wxSmuggle/flowServer.js'

export default {
  props: {
    // 是否审批窗口
    isExamine: {
      type: Boolean,
      default: false
    },
    isHandleUrge: {
      type: Boolean,
      default: true
    },
    // 审批流程id
    approvalId: {
      type: [String, Number],
    },
    taskInfo: {
      type: Object
    }
  },
  data() {
    return {
      getPars: {
        taskId: this.$route.params.id
      },
      list: [],
      recordType: {
        0: '发起',
        1: '审批',
        2: '撤销'
      },
      form: {},
      labelCol: { span: 2 },
      wrapperCol: { span: 22 },
      status: null,
      approverId: null, // 发起人的userId
      urgeDisabled: false, // 催一下是否能操作
      validatorRules: {
        status: [
          { required: true, message: '请选择审批结果', trigger: 'change' },
        ],
        labelName: [
          { required: true, message: '请选择标签', trigger: 'change' },
        ]
      }
    }
  },
  computed: {
    // 是否需要审批
    isApprover() {
      if(this.status==1) {
        return true
      } else {
        return false
      }
    },
    // 发起人的id是否等于当前登录账号的userId
    isInitiator() {
      let userInfo = Vue.ls.get(USER_INFO)
      let userId = userInfo.id //当前用户id
      if(this.approverId === userId) {
        return true
      } else {
        return false
      }
    }
  },
  mounted() {
    this.getDetails()
  },
  methods: {
    // 获取详情
    getDetails() {
      if(!this.approvalId) return
      let userInfo = Vue.ls.get(USER_INFO)
      let userId = userInfo.id //当前用户id
      this.$set(this.form, 'userName', userInfo.username)
      this.$set(this.form, 'orgCode', userInfo.orgCode)
      flowServerApi.getProcessDetail(this.approvalId).then(res => {
        if (res.success) {
          let col = {}
          this.list = res.result
          let arr1 = this.list.filter((col, i) => col.approverId === userId)
          let item = arr1.find(obj => { return obj.recordType === 0 })
          col = arr1.find(obj=> {return obj.status === 1}) || {}
          if (arr1 && arr1.length>0) {
            if(col && Object.keys(col).length===0) {
              col = arr1[arr1.length-1]  //多个节点是一个审批人，则取最后一条记录
            }
            if (col && Object.keys(col).length>0) {
              this.status = col.status
              // 审批状态为通过或者驳回，才赋值到详情里
              if(!this.isApprover)  {
                this.$set(this.form, 'remark', col.remark)
                this.$set(this.form, 'status', col.status)
              }
            }
            if (item && Object.keys(item).length>0) {
              this.approverId = item.approverId
            }
          }
        } else {
          this.$message.warn(res.message);
        }
      })
    },
    // 提交
    onSubmit() {
      if(!this.approvalId) return
      this.$set(this.form, 'processId', this.approvalId)
      this.$refs.form.validate((valid)=> {
        if (valid) {
          let status = this.form.status===2?'通过':'驳回'
          flowServerApi.approval(this.form).then(res => {
            if (res.success) {
              this.$message.success(res.message+status)
              this.$emit('ok', 'success')
              this.$store.dispatch('OperateAjax', true)
            } else {
              this.$message.warn(res.message)
            }
          })
          .catch(e => {
            this.$message.warn('请求失败！')
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 催一下
    handleUrge(item) {
      let form = {
        userId: item.approverId,
        incidentName: Object.keys(this.taskInfo).length>0 && this.taskInfo.incidentName? this.taskInfo.incidentName: '', //案事件名称
        taskName: Object.keys(this.taskInfo).length>0 && this.taskInfo.taskName? this.taskInfo.taskName: '', //任务名称
      }
      flowServerApi.getUrge(form).then(res => {
        if (res.success) {
          this.$message.success(res.message);
          this.urgeDisabled = true
        } else {
          this.$message.warn(res.message);
        }
      })
    },
    onCancel() {
      this.$emit('ok');
    },
    setStatus(value) {
      // 0：未审批，1：待审批，2：通过，3：驳回
      if (value === 1) {
        return 'process'
      } else if (value === 2) {
        return 'finish'
      } else if (value === 3) {
        return 'error'
      }
    },
    getContent(index, key) {
      let col = this.list.find((col, i) => i === index)
      if (col) {
        return col[key]
      }
    }
  }
}
</script>
<style lang="less" scoped>
.font-gray{
  margin-top: 20px;
  p {
    font-size: 12px;
  }
}
.green {
  color: #52c41a;
}
.red {
  color: #ff4d4f;
}
.blue {
  color: #5a87db;
}
</style>